<template>
  <el-card :body-style="BodyCss">
    <slot></slot>
  </el-card>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed } from "vue";
const router = useRouter();

/**
 * @param padding  内边距
 * @param color    背景色
 * @param width    card的宽度
 * @param height   card的高度
 */
const props = defineProps({
  padding: {
    type: [String],
    default: "16px",
  },
  color: {
    type: [String],
    default: "#fff",
  },
  width: {
    type: [String],
    default: "",
  },
  height: {
    type: [String],
    default: "100%",
  },
});

const BodyCss = computed(() => {
  return `padding:${props.padding};background:${props.color};width:${props.width};height:${props.height}`;
});
</script>

<style lang="scss" scoped></style>